<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
    <style>
        *{
            margin: 0;
            padding: 0px;
            border: 0;
        }
        .box1{
            width: 600px;
            height: 40px;
            border: 1px solid black;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .box1 div{
            height: 26px;
            display: inline-block;
            font: 12px/26px '微软雅黑';
            background-color: gold;
            padding: 0px 10px;
            margin-left: 10px;
        }
        .box1 span{
            margin-left:10px ;
        }
        .box2{
            width: 958px;
            height: 40px;
            border: 1px solid black;
        }
        .box2  ul{
            margin: 10px auto;
            width: 710px;
            
        }
        .box2  ul li{
            display: inline-block;
            
            list-style: none;
            border-left: 1px solid black ;
            font: 14px '微软雅黑' ;
            padding:0px 20px;
        }
         .box2 .box2_one{
            border-left:1px solid white ;
        }
        .box2 ul li a{
            text-decoration: none;
            color: #333333;
        }
        .box3{
            margin-top: 20px;
            width: 960px;
            height: 40px;
            background-color: #55a8e5;
        }
        .box3 ul li{
            float: left;
            list-style: none;
            font: 14px/40px '微软雅黑' ;
            width: 100px;
            text-align: center;
        }
        .box3 ul li a{
            display: inline-block;
            width: 100%;
            text-decoration: none;
            color: white;
        }
        .box3 ul li a:hover{
            background-color:#00619f ;
        }
        .box_pos{
            position: relative;
        }
        .box_pos img{
            position: absolute;
            top: -7px;
            left: 27px;
        }

        .box4{
            margin-top: 30px;
            margin-left: 20px;
            width: 968px;
            border: 1px solid lightgray;
            height: 300px;
            
        }
        .box4 h3{
            margin-left: 20px;
            display: inline-block;
            font: 18px/50px '微软雅黑';
            color:#000000;
            border-bottom: red 2px solid;
        }
        .box4 .box4_box{
            width: 920px;
            border-top: 1px solid lightgray;
            margin: -2px 20px 38px;

        }
        .box4_box div{
            float: left;
            width: 160px;
            height: 68px;
            background: url("./../imgs/float-imgs/goods.jpg") no-repeat;
            margin-right: 29px;   
            margin-top: 25px;         
        }
        .box4 .box4_box div:nth-child(5){
            margin-right:0 ;
        }
        .box4 .box4_box div:nth-child(10){
            margin-right:0 ;
        }
        .box5{
            width: 600px;
            border: 1px solid lightgray;
            margin-top: 30px;
            margin-left: 20px;
            height: 292px;
        }
       
        .box5 ul{
            position: relative;
            width: 560px;
            border-top: 1px solid lightgray;
            margin: 0px 10px 0px;
            padding-left: 16px;
            list-style-type: square;
        }
         .box5 h3{
            margin-left: 10px;
            display: inline-block;
            font: 18px/50px '微软雅黑';
            color:#000000;
            border-bottom: red 2px solid;
            padding: 0px 10px;
        }
        .box5 ul li{
            font-size:1px;
            margin: 26px 0px;
            
        }
        .box5 ul li a{
            float: left;
            text-decoration: none;
            color: #666666;
            font: 14px '微软雅黑';
        }
        .box5 ul li span{
            float: right;
            color: #666666;
        }
        .box6{
            width: 600px;
            border: 1px solid lightgray;
            margin-top: 30px;
            margin-left: 20px;
            height: 320px;
        }
        .box6_head{
            width: 560px;
            margin: 0px auto;

        }
        .box6_head h3{
            float: left;
            margin-left: -8px;
            font: 18px/50px '微软雅黑';
            color:#000000;
            border-bottom: red 2px solid;
            
            padding: 0px 10px;
        }
        .box6_head a{
            text-decoration: none;
            color: lightgray;
            float: right;
            font: 18px/50px '微软雅黑';
            
        }
        .box6 ul{
            position: relative;
            width: 560px;
            border-top: 1px solid lightgray;
            margin: 0px auto;
            padding-left: 16px;
            list-style-type: square;
        }

        .box6 ul li{
            font-size:1px;
            margin: 26px 0px;
            
        }
        .box6 ul li a{
            float: left;
            text-decoration: none;
            color: #666666;
            font: 14px '微软雅黑';
        }
        .box6 ul li a img{
            margin-right: 4px;
            margin-top: -1px;
        }
        .box6 ul li span{
            float: right;
            color: #666666;
        }
        .box7{
            width: 498px;
            height: 343px;
            border: 1px red solid;
            margin: 15px;
        }
        .box7 h3{
            height: 20px;
            font: 20px/20px '微软雅黑';
            border-left: solid 4px red;
            padding: 0px 10px;
            margin: 30px 32px  17px;
        }
        .box7 .box7_left{
            width: 212px;
            height: 239px;
            background: url("./../imgs/float-imgs/nv_left_big.jpg") no-repeat;
            background-size: 100% 100%;
            float: left;
            margin-left: 32px ;
        }
        .box7 .box7_right{
            float: right;
            width: 211px;
            height: 239px;
            margin-right: 32px ;
            margin-top: -240px;
        }
        .box7 .box7_right a{
            text-decoration: none;
        }
        .box7 .box7_right .box7_right_top{
            text-align:center;
        }
        .box7 .box7_right .box7_right_top img{
            height: 90px;
        }
       .box7 .box7_right .box7_right_top a{
           font-size: 17px;
           color: black;
           display: block;
       }

        .box7 .box7_right .box7_right_top div:nth-child(1){
            float: left;
            /* background-color: red; */
            height: 142px;
            width: 50%;
        }
        .box7 .box7_right .box7_right_top div:nth-child(2){
            float: right;
            height: 142px;
            width: 50%;
        }
        .box7 .box7_right .box7_right_bottom{
            height: 97px;
            width: 100%;
        }
        .box7 .box7_right .box7_right_bottom a{
            font-size: 14px;
            color: black;
        }
        .box7 .box7_right .box7_right_bottom table{
            width: 211px;
            height: 97px;
            border-collapse: collapse;
        }
        .box7 .box7_right .box7_right_bottom table tr td{
            border: 1px dashed lightgray;
            width: 50%;
        }
        .demo7-q{
            height: 239px;
            width: 212px;
            display: inline-block;
            float: left;
         
        }
        .clearflx::after,.clearflx::before{
            content: "";
            display: table;
        }
        .clearflx::after{
            clear: both;
        }
        .clearflx{
            zoom: 1;
        }
    </style>
</head>
<body>
<div class="box1">
    <div>上一页</div>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <span>....</span>
    <div>17</div>
    <div>18</div>
    <div>19</div>
    <div>20</div>
    <div>下一页</div>
</div>
    <div class="box2">
        <ul>
            <li class="box2_one"><a href="#">首页</a></li>
            <li><a href="#">网站建设</a></li>
            <li><a href="#">程序开发</a></li>
            <li><a href="#">网咯营销</a></li>
            <li><a href="#">企业VI</a> </li>
            <li><a href="#">案例展示</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>    

    <div class="box3">
        <ul>
            <li ><a href="#">首页</a></li>
            <li><a href="#">网站建设</a></li>
            <li><a href="#">程序开发</a></li>
            <li><a href="#">网咯营销</a></li>
            <li class="box_pos">
                <a href="#">企业VI</a> 
                <img src="./imgs/new.png" alt="">
            </li>
            <li><a href="#">案例展示</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </div>
            <div class="box4">
                <h3>图片展示</h3>
                <div class="box4_box">
                    <div><img src="./imgs/goods.jpg"></div>
                    <div><img src="./imgs/goods.jpg"></div>
                    <div><img src="./imgs/goods.jpg"></div>
                    <div><img src="./imgs/goods.jpg"></div>
                    <div><img src="./imgs/goods.jpg"></div>
                    <div><img src="./imgs/goods.jpg"></div>
                    <div><img src="./imgs/goods.jpg"></div>
                    <div><img src="./imgs/goods.jpg"></div>
                    <div><img src="./imgs/goods.jpg"></div>
                    <div><img src="./imgs/goods.jpg"></div>
                </div>
            </div>

            <div class="box5">
                <h3>新闻列表</h3>
                <ul >
                    <li><a href="#"> 沈腾首回应杨幂魏大勋恋情：我什么都不知道</a> <span>2020-2-20</span></li>
                    <li><a href="#">曝张柏芝时装店因疫情停业 月亏损达六位数</a> <span>2020-2-20</span></li>
                    <li><a href="#">冉莹颖晒自拍被批"整成鬼" 八个字大度回应</a> <span>2020-2-20</span></li>
                    <li><a href="#">医护人员称疫情结束看张杰演唱会 本尊回应</a> <span>2020-2-20</span></li>
                    <li><a href="#">这个"青铜"是王者 奥迪RS 4 Avant特别版</a> <span>2020-2-20</span></li>
                    <li><a href="#">冉莹颖晒自拍被批"整成鬼" 八个字大度回应</a> <span>2020-2-20</span></li>
                </ul>
            </div>
            <div class="box6">
                <div class="box6_head clearflx">
                    <h3>新闻列表</h3>
                    <a href="#">更多&gt;&gt;</a>
                </div>
                <ul >
                    <li><a href="#"><img src="./imgs/icon.jpg">沈腾首回应杨幂魏大勋恋情：我什么都不知道</a> <span>2020-2-20</span></li>
                    <li><a href="#"><img src="./imgs/icon.jpg">曝张柏芝时装店因疫情停业 月亏损达六位数</a> <span>2020-2-20</span></li>
                    <li><a href="#"><img src="./imgs/icon.jpg">冉莹颖晒自拍被批"整成鬼" 八个字大度回应</a> <span>2020-2-20</span></li>
                    <li><a href="#"><img src="./imgs/icon.jpg">医护人员称疫情结束看张杰演唱会 本尊回应</a> <span>2020-2-20</span></li>
                    <li><a href="#"><img src="./imgs/icon.jpg">这个"青铜"是王者 奥迪RS 4 Avant特别版</a> <span>2020-2-20</span></li>
                    <li><a href="#"><img src="./imgs/icon.jpg">冉莹颖晒自拍被批"整成鬼" 八个字大度回应</a> <span>2020-2-20</span></li>
                </ul>
            </div>


            <div class="box7">
                <h3>淘宝女装</h3>
                <img src="./imgs/nv_left_big.jpg" class="demo7-q">
                <div class="box7_left"></div>
                <div class="box7_right">
                    <div class="box7_right_top clearflx">
                        <div>
                            <img src="./imgs/nv_small_01.jpg" alt="美妆">
                            <a href="#">时尚包包</a>
                        </div>
                        <div>
                            <img src="./imgs/nv_small_02.jpg" alt="潮流美鞋">
                            <a href="#">潮流美鞋</a>
                        </div>
                    </div>
                    <div class="box7_right_bottom">
                        <table >
                            <tr>
                                <td align="center"><a href="#">新品上市</a> </td>
                                <td align="center"><a href="#">女装</a> </td>
                            </tr>
                            <tr>
                                <td align="center"><a href="#">欧美风</a> </td>
                                <td align="center"><a href="#">美搭</a></td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
</body>
</html>